<template>
  <view class="alarm-ring px-2 py-2.5 box-border">
    <view class="head h-[278rpx]">
      <image
        class="w-[100%] h-[100%]"
        src="http://cy.meta-links.com.cn/icon/lzBg.png"
        mode="aspectFit"
      ></image>
      <text
        class="self-font text-white text-[80rpx] absolute left-[20%] top-[20%] z-10"
        >{{ sloganText.text1 }}</text
      >
      <text
        class="self-font text-white text-[80rpx] absolute right-[20%] bottom-[20%] z-10"
        >{{ sloganText.text2 }}</text
      >
    </view>
    <view class="part-box mt-2.5 px-2.75 py-5 box-border">
      <view
        class="list-menu list-menu1 w-[100%] h-[104rpx] rounded-6.5 flex flex-row items-center"
      >
        <view class="icon-box" style="border: none">
          <image
            src="http://cy.meta-links.com.cn/icon/jyqf.png"
            mode="aspectFit"
          ></image>
        </view>
        <text class="text-black text-[29rpx] font-bold tracking-1 ml-3"
          >缙云清风</text
        >
        <!-- <button
          class="btn-489DFB btn-mini mr-3"
          @click="onPageJump('/subPages/police/publicAccount/jyqf')"
        >
          进入公众号
        </button> -->
        <button
          class="btn-489DFB btn-mini mr-3"
          @click="open(1)"
        >
          进入公众号
        </button>
      </view>
      <view
        class="list-menu list-menu2 w-[100%] h-[104rpx] rounded-6.5 mt-2.5 flex flex-row items-center"
      >
        <view class="icon-box">
          <image
            src="http://cy.meta-links.com.cn/icon/fzby.png"
            mode="aspectFit"
          ></image>
        </view>

        <text class="text-black text-[29rpx] font-bold tracking-1 ml-3"
          >风正巴渝</text
        >
        <!-- <button
          class="btn-489DFB btn-mini mr-3"
          @click="onPageJump('/subPages/police/publicAccount/fzby')"
        >
          进入公众号
        </button> -->
        <button class="btn-489DFB btn-mini mr-3" @click="open(2)">
          进入公众号
        </button>
      </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>







    <up-popup :show="show" mode="center">
      <view style="padding: 50rpx 50rpx 0 50rpx">
        <view style='text-align: center;'>长按识别二维码</view>
        <up-image
          :show-loading="true"
          :src="imgyrl"
          width="360rpx"
          height="360rpx"
        ></up-image>
        <view style="margin-top: 30rpx;margin-bottom:30rpx">
          <up-button type="primary" text="关闭" @click="close"></up-button>
        </view>
      </view>
    </up-popup>





  </view>
</template>
<script setup lang="ts">
import { getAlarmRing } from "@/api/police/alarmRing";
import { onPageJump } from "@/utils/tools";


const imgyrl = ref("");
const show = ref(false);
const open = function (e) {
  if (e == 1) {
    imgyrl.value =
      "https://mscy.cqlandun.com:8088/static/qr_code_2.jpg";
  } else if (e == 2) {
    imgyrl.value =
      "https://mscy.cqlandun.com:8088/static/qr_code_1.jpg";
  }
  show.value = true;
};

const close = function () {
  show.value = false;
};


const uToastRef = <any>ref(null);
const sloganText = reactive({
  text1: "",
  text2: "",
});
const getSlogan = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  getAlarmRing()
    .then((res) => {
      uni.hideLoading();
      const { data } = res;
      sloganText.text1 = data.content.split("；")[0];
      sloganText.text2 = data.content.split("；")[1];
    })
    .catch((err) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
onLoad(() => {
  uni.loadFontFace({
    family: "WeiBeiJian",
    source: 'url("https://mscy.cqlandun.com:8088/static/cyjwb.ttf")',
    success() {
      console.log("success");
    },
    fail(err) {
      console.log(err);
    },
    complete(res) {
      console.log(res);
    },
  });
  getSlogan();
});
</script>

<style lang="scss" scoped>
.alarm-ring {
  .head {
    position: relative;
    .title-text1 {
      position: absolute;
      top: 50rpx;
      left: 110rpx;
    }
    .title-text2 {
      position: absolute;
      bottom: 67rpx;
      right: 110rpx;
    }
  }
  .list-menu {
    box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
    .icon-box {
      width: 90rpx;
      height: 90rpx;
      background: #fff;
      border: 0.7rpx solid #707070;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10rpx;
      > image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .list-menu1 {
    background: linear-gradient(180deg, #f0f3f5 0%, #e1eeff 100%);
  }
  .list-menu2 {
    background: linear-gradient(180deg, #ebf0f1 0%, #cbedec 100%);
  }
}
.self-font {
  font-family: "WeiBeiJian";
}
</style>
